<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>材质</title>
</head>
<body onload="init()">
<script src="../three.min.js"></script>
<script>
  /* 参数
   -----------------------------------------------------------------

   THREE.MeshBasicMaterial(opt)

   opt可以缺省，或者为包含各属性的值。
     visible：是否可见，默认为true
     side：渲染面片正面或是反面，默认为正面 THREE.FrontSide，可设置为反面 THREE.BackSide，或双面 THREE.DoubleSide
     wireframe：是否渲染线而非面，默认为false
     color：十六进制RGB颜色，如红色表示为0xff0000
     map：使用纹理贴图，详见4.5节

   -----------------------------------------------------------------
   */

  function init() {
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(400, 300);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x000000)

    let scene = new THREE.Scene();

    let camera = new THREE.PerspectiveCamera(50, 400 / 300, 1, 10)
    camera.position.set(1, 3, 5);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    let geometry = new THREE.Geometry();


    let cube = new THREE.Mesh(
        new THREE.CubeGeometry(2, 2, 2),
        new THREE.MeshBasicMaterial({
          color: 0xffff00,
          opacity: 0.75
        })
    );
    scene.add(cube);

    renderer.render(scene, camera);
  }
</script>
</body>
</html>